import React from 'react';
import ReactDOM from 'react-dom/client';
import { createBrowserRouter, RouterProvider } from 'react-router';

import App from './App';
import ErrorPage from './error-page';
import Root, { loader as rootLoader } from './routes/root';
import Contact, { loader as contactLoader, action as contactAction } from './routes/contact';

if (import.meta.env.MODE === 'development') {
  import('./mocks/browser').then(({ worker }) => worker.start());
}

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    errorElement: <ErrorPage />,
    children: [
      {
        index: true,
        element: <Root />,
        loader: rootLoader,
      },
      {
        path: 'contacts/:contactId',
        element: <Contact />,
        loader: contactLoader,
        action: contactAction,
      },
    ],
  },
]);

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);
